// 引入react
import React from 'react';
// 引入react-route
import { BrowserRouter as Router ,Route, Switch} from "react-router-dom";
// 引入样式
import "antd/dist/antd.css";

// 引入appjs用的组件
import PrivateRoute from './component/Show';
// 引入组件（自己写的）侧边栏用
import Guide from './page/Guide/Guide';
import Permission from './page/User/Permission';
import User from './page/User/User';
import Login from './page/Login/Login';

class App extends React.Component {
	//一个组建类必须要实现一个render方法，这个render方法必须返回一个jsx元素，必要要用一个外层的jsx元素把所有的类容包裹起来， 返回并列多个jsx元素是不合法的
	render () {
		return  (
			<Router>
				<div style={{width:'100%',height:'100%'}}>
				{/* Switch组件是为了让我在路有里面只匹配一个 */}
					<Switch>
						{/* PrivateRoute 是为了路由拦截 这样子当我访问guide这些页面的时候，因为没有登录，会全部跳转到login页面，这是PrivateRoute里面实现的 */}
						<PrivateRoute path="/Guide" component={Guide} />
						<PrivateRoute path="/User" component={User} />
						<PrivateRoute path="/Permission" component={Permission} />
						<Route path="/Login" component={Login} />
						{/* exact是让精准匹配 */}
						<PrivateRoute exact path="/" component={Guide} />
						{/*<Route component={NoMatch}/>*/}
					</Switch>
				</div>
			</Router>
		  );
	}
}

export default App;
